import { useI18n } from '@/hooks/web/useI18n'
import { reactive, UnwrapRef } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useValidator } from '@/hooks/web/useValidator'

const { t } = useI18n()
import { ActionButtonsTemplate, SchemaConfig } from '@/api/global/types'
import { useUserStore } from '@/store/modules/user'
import { ElButton, ElIcon } from 'element-plus'
import { Close } from '@element-plus/icons-vue'

const { required } = useValidator()

const userStore = useUserStore()

interface Option {
  label: string
  value: string | number // 具体取决于你的数据
}

const createOptions = (enumObject: { [key: string]: string }): Option[] => {
  return Object.keys(enumObject).map((key) => ({
    label: enumObject[key],
    value: parseInt(key, 10)
  }))
}

export default function (schemaConfig: SchemaConfig) {
  const genderOption = reactive(createOptions(schemaConfig?.fieldEnum?.value?.gender || {}))
  const countryOption = schemaConfig?.selectEnum?.value?.country || {}

  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('supplierContact.id'),
      align: 'center',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'supid',
      label: t('supplierContact.supid'),
      search: {
        component: 'Select',
        componentProps: {
          options: schemaConfig?.supplierList
        }
      },
      form: {
        component: 'Select',
        componentProps: {
          options: schemaConfig?.supplierList
        },
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.supname
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.supname
          }
        }
      }
    },
    {
      field: 'cname',
      label: t('supplierContact.cname'),
      search: {
        // hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'gender',
      label: t('supplierContact.gender'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        formItemProps: {
          rules: [required()]
        },
        componentProps: {
          options: genderOption
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.gender_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.gender_value
          }
        }
      }
    },
    {
      field: 'birthday',
      label: t('supplierContact.birthday'),
      search: {
        hidden: true
      },
      form: {
        component: 'DatePicker',
        componentProps: {
          type: 'date',
          valueFormat: 'YYYY-MM-DD'
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'phone',
      label: t('supplierContact.phone'),
      search: {
        // hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'email',
      label: t('supplierContact.email'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required(), { type: 'email' }]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'qq',
      label: t('supplierContact.qq'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          // rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'wechat',
      label: t('supplierContact.wechat'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'whatsapp',
      label: t('supplierContact.whatsapp'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'dingtalk',
      label: t('supplierContact.dingtalk'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          // rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'country',
      label: t('supplierContact.country'),
      search: {
        hidden: true
      },
      form: {
        component: 'Select',
        formItemProps: {
          rules: [required()]
        },
        componentProps: {
          filterable: true,
          options: countryOption
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.country_name
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.country_name
          }
        }
      }
    },
    {
      field: 'address',
      label: t('supplierContact.address'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'department',
      label: t('supplierContact.department'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'position',
      label: t('supplierContact.position'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'level',
      label: t('supplierContact.level'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          // rules: [required()]
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'tags',
      label: t('supplierContact.tags'),
      search: {
        hidden: true
      },
      form: {
        componentProps: {
          class: 'invisible-input',
          readonly: true,
          slots: {
            prefix: () => {
              return schemaConfig?.tagsObj?.tagsList.map((item) => (
                <ElButton
                  size="small"
                  type="success"
                  plain
                  onClick={() => schemaConfig?.tagsObj?.removeTag(item)}
                >
                  {item}
                  <ElIcon>
                    <Close />
                  </ElIcon>
                </ElButton>
              ))
            },
            suffix: () => {
              return (
                <ElButton
                  class="input-button"
                  size="small"
                  type="primary"
                  plain
                  onClick={schemaConfig?.tagsObj?.handleTagsButtonClick}
                >
                  {t('action.add')}
                </ElButton>
              )
            }
          }
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        hidden: true
      }
    },
    {
      field: 'remark',
      label: t('supplierContact.remark'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        componentProps: {
          type: 'textarea'
        }
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        hidden: true
      }
    },
    {
      field: 'create_time',
      label: t('supplierContact.create_time'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        },
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'creator',
      label: t('supplierContact.creator'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        },
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.creator_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.creator_value
          }
        }
      }
    },
    {
      field: 'update_time',
      label: t('supplierContact.update_time'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        },
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'updater',
      label: t('supplierContact.updater'),
      search: {
        hidden: true
      },
      form: {
        component: 'Input',
        formItemProps: {
          rules: [required()]
        },
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return data.row.updater_value
          }
        }
      },
      detail: {
        slots: {
          default: (data: any) => {
            return data.updater_value
          }
        }
      }
    },
    {
      field: 'action',
      width: (schemaConfig?.actionButtonsTemplate?.length || 3) * 60 + 20 + 'px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return schemaConfig?.actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
